<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    width="960px"
  >
    <table class="table table-bordered vertical-align-middle">
      <tbody>
        <tr>
          <td colspan="6" class="bg-light text-center">
            <span style="display: inline-block; width: 75px"></span>
            <span class="font-weight-bold">{{ damInfo.dam_name }}详情</span>
            <el-button type="text" class="float-right p-0" @click="handleRowEdit">
              修改详情
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td width="14%" class="bg-light">坝区名称</td>
          <td width="20%">{{ damInfo.dam_name }}</td>
          <td width="13%" class="bg-light">项目负责人</td>
          <td width="20%">{{ damInfo.res_person }}</td>
          <td width="13%" class="bg-light">联系电话</td>
          <td width="20%">{{ damInfo.res_person_phone }}</td>
        </tr>
        <tr>
          <td class="bg-light">坝区规模</td>
          <td>{{ damInfo.dam_scale }}亩</td>
          <td class="bg-light">主要产业</td>
          <td>{{ damInfo.main_ind }}</td>
          <td class="bg-light">坝区地址</td>
          <td>{{ damInfo.address }}</td>
        </tr>
        <tr>
          <td class="bg-light">投资规模</td>
          <td>{{ damInfo.input_scale }}万元</td>
          <td class="bg-light">负责领导</td>
          <td>{{ damInfo.res_leader }}</td>
          <td class="bg-light">负责乡镇</td>
          <td>{{ damInfo.res_leader_address }}</td>
        </tr>
        <tr>
          <td class="bg-light">附件</td>
          <td colspan="5">
            <div v-for="(p, index) of damInfo.files" :key="index">
              <a :href="p" target="_blank">{{ p.replace(/.*\/(.*)$/, '$1') }}</a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  props: {
    visible: Boolean,
    damInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleRowEdit() {
      this.$emit('edit')
    },
  },
}
</script>
<style lang="scss" scoped></style>
